<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
    <head>
        <title>SL商城--修改资料</title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<!-- 引入 Bootstrap -->
			<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
 
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    </head>
	
	<style>
		#update{
			width:470px;
			margin:100px 0px;
		}
		
	</style>
	
	<body>
		
		<div id="update">
			<form method="post" enctype="multipart/form-data" action="${pageContext.request.contextPath }/user_update.do" class="form form-horizontal" id="edit">
				
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="time">申请时间 :</label>
						<div class="col-xs-6">
							<label class="control-label">2013-7-7 </label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="uname">用户名 :</label>
						<div class="col-xs-6">
							<label class="control-label">${user.userid }</label>
						</div>
					</div>
					<input type="hidden" value="${user.uid}" name="uid">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="urealname">真实姓名 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="realname" value="${user.realname }" required maxlength="10" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="cardtype">证件类型 :</label>
						<div class="col-xs-6">
							<select name="cardtype" class="form-control">
								<option value="-1" > --请选择-- </option>
								<option value="1" <c:if test="${user.cardtype==1 }"> selected="selected" </c:if> > 二代身份证 </option>
								<option value="2" <c:if test="${user.cardtype==2 }"> selected="selected" </c:if> > 护照 </option>
								<option value="3" <c:if test="${user.cardtype==3 }"> selected="selected" </c:if> > 军官照 </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="idcard">证件号码 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="cardid" value="${user.cardid }" required maxlength="18" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="country">收货国家 :</label>
						<div class="col-xs-6">
							<select name="country" class="form-control">
								<option value="-1"> --请选择-- </option>
								<option value="1"  <c:if test="${user.country==1 }"> selected="selected" </c:if> > 中国 </option>
								<option value="2" <c:if test="${user.country==2 }"> selected="selected" </c:if> > 美国 </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="phone">移动电话 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="phone" value="${user.phone }" required maxlength="11" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="email">电子邮件 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="email" value="${user.email }"  required pattern="^\w+@\w+(\.[a-zA-Z0-9]{2,}){1,2}$"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="postnum">邮政编码 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="postcode" value="${user.postcode }" required maxlength="6" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="sex">性别 :</label>
						<div class="col-xs-6">
							<select name="sex" class="form-control">
								<option value="-1"> --请选择-- </option>
								<option value="1" <c:if test="${user.sex==1 }"> selected </c:if> > 男 </option>
								<option value="2" <c:if test="${user.sex==0 }"> selected </c:if> > 女 </option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="addrphone">联系电话 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="addrphone" value="${user.phone }" required maxlength="11" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="address">收货地址 :</label>
						<div class="col-xs-8">
							<textarea  style="min-width:300px; min-height:100px;max-height:100px; max-width:300px; " name="address" class="form-control" rows="4"  required maxlength="100" >${user.address }</textarea>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="bankaddr">开户行 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="bank" value="${user.bank }"  maxlength="50" />
						</div>
					</div>
					<div class="form-group">
						<label class="col-xs-4 control-label" for="banknum">开户卡号 :</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="bankno" value="${user.bankno }" maxlength="19" >
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group">
						<label class="col-xs-4 control-label" for="bankuser">开户人:</label>
						<div class="col-xs-6">
							<input class="form-control" type="text" name="baakname" value="${user.baakname }" maxlength="5" />
						</div>
					</div>
				</div>
				
				<div class="row">
					<div class="form-group col-xs-12">
						<label class="col-xs-4 control-label" for="cardf">上传身份证图片(正面) :</label>
						<div class="col-xs-4 form-group">
							<input type="file" name="cardf" onchange="PreviewImage('cardfprev',this,120,120);" />
						</div>
						<div id="cardfprev" class="col-xs-4">
							<img src="${pageContext.request.contextPath }/upload/${user.cardfront }" width="200" />
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<label class="col-xs-4 control-label" for="cardv">上传身份证图片(反面) :</label>
						<div class="col-xs-4 form-group">
							<input type="file" name="cardv" onchange="PreviewImage('cardvprev',this,120,120);" />
						</div>
						<div id="cardvprev" class="col-xs-4">
							<img src="${pageContext.request.contextPath }/upload/${user.cardverso }" width="200" />
						</div>
					</div>
				</div>
				<div class="row">
					<div class="form-group col-xs-12">
						<label class="col-xs-4 control-label" for="bankimage">上传银行卡图片(正面) :</label>
						<div class="col-xs-4 form-group">
							<input type="file" name="bankimg" onchange="PreviewImage('bankprev',this,120,120);" />
						</div>
						<div id="bankprev" class="col-xs-4">
							<img src="${pageContext.request.contextPath }/upload/${user.bankimage }" width="200" />
						</div>
					</div>
				</div>
				
				<div class="pull-right">
					
					<button class="btn btn-success">
						<span class="glyphicon glyphicon-check" />
						保 存
					</button>
				</div>
				
			</form>
			
		</div>
		
    </body>
	
	<script type="text/javascript">
		
	function checkPic(picPath) {
		picPath=picPath.value;
        var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase();
        if (type != "jpg" && type != "bmp" && type != "gif" && type != "png") {
            alert("请上传正确的图片格式");
            return false;
        }
        return true;
    }
    //图片预览
    function PreviewImage(divImage, upload, width, height) {
        if (checkPic(upload)) {
            try {
                var imgPath;      //图片路径
                imgPath = upload.files[0];
				var r =new FileReader();
				r.readAsDataURL(imgPath);
				$(r).load(function(){
					document.getElementById(divImage).innerHTML = "<img src='" + this.result + "' width='200' />";
				})
            } catch (e) {
                alert("请上传正确的图片格式");
            }
        }
    }
		
	</script>
	
</html>